<template>
  <view class="my_likes">
    <view class="search-box" @click="gotoserch()">
      <!-- 使用 uni-ui 提供的搜索组件 -->
      <uni-search-bar  :radius="100" cancelButton="none" @click="gotoserch()" focus="none"></uni-search-bar>
    </view>
    <view class="likes_con">
      <view class="likes_item" v-for="(item,index) in likeUsers" :key="index">
        <image :src="item.avatar"  @click="gotoPerson(index,item.id)" ></image>
        <view class="name">
          {{item.nickname}}
        </view>
        <uni-fav :checked="isfllow[index]" star="false" :content-text="contentText" @click="favClick(index,item.id)" />
      </view>
    </view>
    <uni-popup ref="message" type="message">
          <uni-popup-message :type="success" :message="messageText" :duration="2000"></uni-popup-message>
        </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        btn:"关注",
        likeUsers:[],
        isfllow:[],
        messageText: "您还没有关注的人噢",
        contentText: {
        					contentDefault: '关注',
        					contentFav: '已关注'
        				}
      };
    },
    onLoad() {
      this.getFollows()
    },
    methods:{
      favClick(index,id){
        this.changeFollow(id)
        this.isfllow[index]=!this.isfllow[index]
        this.$forceUpdate()
      },
      async changeFollow(id){
        const {
          data: res
        } = await uni.$http.post('/users/' + id + '/operator/follow')
        if (res.code != 1000) return uni.$showMsg()
      },
      async getFollows(){
        const {
          data: res
        } = await uni.$http.get('/self/followee-ids')
        if (res.code != 1000 && res.code != 6666) return uni.$showMsg()
        if (res.code == 6666) this.$refs.message.open()
        this.likeUsers=res.data.users
        for(var i =0;i<this.likeUsers.length;i++){
          this.isfllow.push(true)
        }
      },
      gotoPerson(index,id){
        uni.navigateTo({
          url:`./../personPage/personPage?is_fllow=${this.isfllow[index]}&id=${id}`
        })
      },
      gotoserch(){
        uni.navigateTo({
          url:'./../search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
.my_likes{
  .likes_con{
    .likes_item{
      background-color: #fff;
      height: 65px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .name{
        font-size: 15px
      }
      image{
        width: 55px;
        height: 55px;
        border-radius: 50%;
      }
    }
  }
  .uni-searchbar {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      position: relative;
      padding: 16rpx;
      /* 将默认的 #FFFFFF 改为 #C00000 */
      background-color: #1684FC ;
    }
    .search-box {
      position: sticky;
      top: 0;
      z-index: 999;
    }
}
</style>
